<template>
  <div>
    <!-- 时间查询下拉框 -->
    <el-select
      v-model="model.searchTime"
      placeholder="请选择"
      :style="{ width: '9rem' }"
      @change="SelectValue($event)"
    >
      <el-option
        v-for="op in searchTimeOption"
        :key="op.value"
        :label="op.label"
        :value="op.value"
      />
    </el-select>
    <el-select
      v-model="model.yearData"
      placeholder="请选择"
      :style="{ width: '6rem' }"
      :disabled="model.searchTime===2||model.searchTime===3"
      @change="SelectYearValue($event)"
    >
      <el-option
        v-for="op in yearOption"
        :key="op.value"
        :label="op.label"
        :value="op.value"
      />
    </el-select>

    <el-date-picker
      v-model="model.createDate"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      :disabled="model.searchTime===0||model.searchTime===1"
      :style="{ width: '10rem' }"
      placeholder="选择开始日期"
    />

    <span class="label_Area">至</span>

    <el-date-picker
      v-model="model.endDate"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      :disabled="model.searchTime===0||model.searchTime===1"
      :style="{ width: '10rem' }"
      placeholder="选择结束日期"
    />
  </div>
</template>

<script>

export default {
  name: 'TimeQuery',
  props: {
    model: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      searchTimeOption: [
        { label: '录入年度查询', value: 0 },
        { label: '体检年度查询', value: 1 },
        { label: '录入日期查询', value: 2 },
        { label: '体检日期查询', value: 3 }
      ],
      yearOption: [{ label: '2020', value: 0 },
        { label: '2021', value: 1 }],
      searchTimeD: false,
      yearD: true,
      createDateD: true,
      endDateD: true
    }
  },
  methods: {
    SelectValue(val) {
      console.log(val)
      if (val == '1') {
        this.yearD = false
        this.createDateD = true
        this.endDateD = true
        this.model.createDate = ''
        this.model.endDate = ''
      } else if (val == '2') {
        this.yearD = true
        this.createDateD = false
        this.endDateD = false
        this.model.yearData = ''
      } else if (val == '3') {
        this.yearD = true
        this.createDateD = false
        this.endDateD = false
        this.model.yearData = ''
      }
      this.model.searchTime = val
    },
    SelectYearValue(val) {
      console.log(val)
      this.model.yearData = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
